<template>
	<view class="page">
		<sidebars></sidebars>

		<view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="open ? ['page-top','c-state','cover'] : 'page-top'">
			<view class="content">
				<view class="flex_box heads">
					<view @tap="tap_ch" class="iconfont icon-leimupinleifenleileibie"></view>
					<view class="title flex">
						深正电子科技
					</view>
				</view>
				<banner></banner>


				<view class="layout_box">
					<view class="flex_box">
						<view class="flex" v-for="item in sonType">
							<view @tap="typelink" :data-typeid="item.typeid" hover-class="navigator-hover">
								<image :src="item.typelitpic" class="layout_img" />
								<text class="layout_text">{{item.typename}}</text>
							</view>
						</view>
						</block>
					</view>
				</view>

				<view class="i-about">
					<text class="h2">关于我们</text>
					<text class="hr"></text>
					<text class="p">深正电子科技有限公司是君宏隆电子设备有限公司旗下子公司，君宏隆2006成立于深圳市福永镇，主营SMT贴片机销售。设备维修配件供应等一站式服务。2009成立SMT贴片生产加工厂。长沙生产基地成立于2012年目前生产面积1000多平方米，公司拥有SMT、DIP、THT、产品组装测试和包装等生产线、高低温老化等多种专业生产设备；可为客户提供快捷，保质保量的交货需求。</text>
					<view class="more_box" bind:tap="goProduct">
						<text class="more_btn" @tap="goAbout">
							查看更多
						</text>
					</view>
				</view>

				<view class="i-dl">
					<view class="i-dt flex_box">
						<text class="i-dt-title flex">
							生产能力
						</text>
						<view class="i-dt-more" @tap="goProduct">
							<text>查看更多</text> <text class="iconfont icon-you"></text>
						</view>
					</view>
					<view class="pic_list_box">

						<view class="pic_ul">

							<view class="pic_li" v-for="item in productList" :data-id="item.id" :data-channelid="item.channel" @tap="goDetails">
								<image :src="item.litpic" mode="aspectFill" class="pic_lis_img" />
								<view class="pic_li_text">
									{{item.title}}
								</view>
							</view>

						</view>

					</view>
				</view>
				<view class="i-dl">
					<view class="i-dt flex_box">
						<text class="i-dt-title flex">
							新闻中心
						</text>
						<view class="i-dt-more" @tap="goNews">
							<text>查看更多</text> <text class="iconfont icon-you"></text>
						</view>
					</view>
				</view>

				<view class="news_list_box">

					<view class="news_ul">



						<view class="news_li" v-for="(item,index) in newsList">
							<view @tap="artlink" :data-typename="item.typename" :data-channelid="item.channel" :data-id="item.id" :class="'list-arc-li ' + (index === 0 ?'list-arc-li-1':'flex_box')"
							 hover-class="none">
								<image :src="item.litpic" mode="aspectFill" class="news_img" />
								<view class="news_txt flex">
									<view class="news_title">
										{{item.title}}
									</view>
								</view>
							</view>
						</view>



					</view>

				</view>
	<maps></maps>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ajaxtype,
		ajaxlist
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				sonType: [],
				productList: [],
				newsList: []
			}
		},
		onLoad() {
			var that = this;
			that.getSonType(2)
			that.productList = that.getList(2, 1, 4); //获取产品列表
			that.newsList = that.getList(3, 1, 4);
		},

		methods: {
			typelink: function(e) {
				console.log(e.currentTarget.dataset.typeid)
				let typeid = e.currentTarget.dataset.typeid
				/*
				uni.switchTab({
					url: '../product/product?typeid=' + typeid
				})
					*/

				uni.navigateTo({
					url: '../product2/product2?typeid=' + typeid
				})

			},
			getList: function(typeId, pageNum, pageSize) {
				var that = this;
				let data = [];
				ajaxlist(typeId, pageNum, pageSize).then((res) => {
					if (res.data && res.data.data) {
						for (let i = res.data.data.length - 1; i >= 0; i--) {
							res.data.data[i].typelitpics = res.data.data[i]['cfg_basehost'] + res.data.data[i]['banner_pic_link']
							res.data.data[i].litpic = res.data.data[i].litpic === '/images/defaultpic.gif' ?
								'/uploads/php/upload/image/20190531/1559307409276043-lp.jpg' : res.data.data[i].litpic
							res.data.data[i].litpic = res.data.data[i]['cfg_basehost'] + res.data.data[i]['litpic']
							data.push(res.data.data[i]);
						}
						/*
						不知为何map后的数组无法返回
						let datas = res.data.data.map((res) => {
							return {
								typelitpic: res.cfg_basehost + res.litpic,
								typeid: res.id,
								typename: res.typename,
								title: res.title
							}
						})
						data=datas
						*/

					}
				})
				return data
			},
			artlink: function(e) {
				let {
					id,
					channelid,
					typename
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: '../art/art?aid=' + id + '&channlid=' + channelid + '&typename=' + typename
				});
			},
			goDetails:function(e){
				let {
					id,
					channelid,
					typename
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: '../details/details?aid=' + id + '&channlid=' + channelid + '&typename=' + typename
				});
			},
			getSonType: function(typeId) {
				var that = this;
				ajaxtype(typeId).then((res) => {

					if (res.data.data.length > 0) {
						let datas = res.data.data.map((res) => {
							let s = {
								typelitpic: res.cfg_basehost + res.typelitpic,
								typeid: res.id,
								typename: res.typename
							};
							return s
						})
						that.sonType = datas
					} else {
						uni.showToast({
							title: "子栏目为空",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			goProduct: function() {

				uni.switchTab({
					url: '/pages/product/product'
				})
			},
			goNews: function() {
				uni.switchTab({
					url: '/pages/news/news'
				})
			},
			goAbout: function() {
				uni.switchTab({
					url: '/pages/about/about'
				})
			},
		}
	}
</script>

<style lang="scss">
	.layout_img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;

	}

	.layout_text {
		display: block;
		font-size: 23rpx;
		margin-top: 10rpx;
	}

	.layout_box {
		width: 100%;
		background-color: #fff;
	}

	.layout_box .flex {
		text-align: center;
	}

	.layout_box {
		padding: 40rpx 0;
		//border-bottom: 1px solid #e4e3de;
	}

	.i-dl {
		padding: 2vw 0;
		box-sizing: border-box;
	}

	.i-dt {
		padding: 2vw 4vw;
		line-height: 6vw;
		color: $base;

		.i-dt-title {
			font-size: 3.8vw;
			font-weight: 700;
		}

		.i-dt-more {
			font-size: 3.2vw;

			.iconfont {
				font-size: 3vw;
			}
		}
	}

	.pic_list_box {
		padding: 0vw 1.5vw;
		width: 100%;
		box-sizing: border-box;

		.pic_ul {
			width: 100%;
			@include flex-block();
			@include flex-wrap(wrap);

			.pic_li {
				@include flex(1);

				min-width: 40%;
				overflow: hidden;
				margin: 1.5vw;
				position: relative;
				border-radius: 2vw;
				box-shadow: 0px 0px 5px #efefef;

				&:nth-child(1),
				&:nth-child(2) {
					min-width: 60%;
					border-radius: 2vw;

					.pic_li_text {
						position: absolute;
						bottom: 0px;
						left: 0px;
						width: 100%;
						color: #fff;
						padding: 3vw 4vw;
						background-color: rgba(00, 00, 00, .3);
					}

					.pic_lis_img {
						height: 50vw;
						border-radius: 2vw;
						display: block;
					}
				}

				.pic_lis_img {
					width: 100%;
					border-radius: 2vw 2vw 0 0;
					height: 40vw;
					object-fit: cover;

					img {
						object-fit: cover;
					}
				}

				.pic_li_text {
					background-color: rgba(256, 256, 256, 1);
					padding: 3vw 4vw;
				}
			}
		}
	}

	.i-about {
		padding: 12vw 4vw;
		background-color: #000;
		color: #fff;
		background-image: url('https://pcba.yihudong.cn/images/about-bj.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;

		text {
			display: block;
			margin-top: 2vw;
		}

		.hr {
			width: 6vw;
			height: 3px;
			background-color: #fff;
		}

		.p {
			line-height: 2;
		}
	}

	.more_box {
		.more_btn {
			padding: 2vw 12vw;
			border: 1px solid rgba(256, 256, 256, .4);
			display: inline-block;
			border-radius: 50vw;
			font-size: 3.5vw;
		}
	}

	.news_list_box {
		margin: 0vw 4vw 2vw;
		background-color: #fff;

		.news_ul {

			border-radius: 2vw;
			overflow: hidden;
		}

		.news_li {
			width: 100%;
			background-color: #fff;

			.news_title {
				font-size: 3.8vw;
				color: #4c4c4c;
			}

			&:nth-child(1) {
				position: relative;

				.news_img {
					width: 100%;
				}

				.news_title {
					font-size: 3.8vw;
					color: #fff;
				}

				.news_txt {
					position: absolute;
					bottom: 0;
					color: #fff;
					padding: 3vw 2vw;
				}
			}

			.list-arc-li.flex_box {
				padding: 2vw;

				.news_img {
					width: 14vw;
					height: 14vw;
				}

				.news_txt {
					padding: 2vw;
					margin-left: 2vw;

				}
			}
		}

	}
	

</style>
